/**
 * @Author: wu.hongmei
 * @Date: 2018-08-09
 */
import React, { Component } from "react";
import { Row, Col, Card, List } from "antd";
// import PropTypes from 'prop-types';
import Icon from "@cbd/icon";
import ReactEcharts from "echarts-for-react";
import styles from "./AmountCard.less";

class AmountCard extends Component {
  getPushOption = () => {
    const option = {
      color: ["#8543E0"],
      xAxis: {
        type: "category",
        axisLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        type: "value",
        axisLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        splitLine: { show: false }
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
          smooth: true,
          areaStyle: {}
        }
      ]
    };
    return option;
  };

  getReadOption = () => {
    const option = {
      color: ["#8543E0"],
      xAxis: {
        type: "category",
        axisLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        type: "value",
        axisLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        splitLine: { show: false }
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "bar"
        }
      ]
    };
    return option;
  };

  getAlgorithmOption = () => {
    const option = {
      color: ["#13C2C2"],
      xAxis: {
        type: "category",
        axisLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        type: "value",
        axisLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        splitLine: { show: false }
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "bar"
        }
      ]
    };
    return option;
  };

  render() {
    return (
      <div className={styles.root}>
        <Row gutter={16}>
          <Col className="gutter-row" span={6}>
            <div className="gutter-box">
              <Card title="接入应用数量" extra={null} style={{ width: "100%" }}>
                <div className={styles.totalNum}>
                  <Icon type="layers-simple-line" />
                  <span>{this.props.accessApp.accessAppCount}</span>
                </div>
                <div className={styles.bottom}>
                  <List.Item>
                    <List.Item.Meta
                      avatar={<i>NEW</i>}
                      title={
                        <a href="#">{this.props.accessApp.newAccessAppName}</a>
                      }
                    />
                    <div>{this.props.accessApp.newAccessAppTime}</div>
                  </List.Item>
                </div>
              </Card>
            </div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div className="gutter-box">
              <Card title="推送数量" extra={null} style={{ width: "100%" }}>
                <div className={styles.detailNum}>
                  <span>{this.props.push.pushCount}</span>
                  <ReactEcharts
                    option={this.getPushOption()}
                    style={{ width: "100%", height: "25px" }}
                  />
                </div>
                <div className={styles.bottom}>
                  <span>
                    日推送量 <i>{this.props.push.dayPushCount}</i>
                  </span>
                </div>
              </Card>
            </div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div className="gutter-box">
              <Card title="查看数量" extra={null} style={{ width: "100%" }}>
                <div className={styles.detailNum}>
                  <span>{this.props.read.readCount}</span>
                  <ReactEcharts
                    option={this.getReadOption()}
                    style={{ width: "100%", height: "25px" }}
                  />
                </div>
                <div className={styles.bottom}>
                  <span>
                    查看率 <i>{this.props.read.readRate}</i>
                  </span>
                </div>
              </Card>
            </div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div className="gutter-box">
              <Card title="推送算法数量" extra={null} style={{ width: "100%" }}>
                <div className={styles.detailNum}>
                  <span>{this.props.algorithm.algorithmCount}</span>
                  <ReactEcharts
                    option={this.getAlgorithmOption()}
                    style={{ width: "100%", height: "25px" }}
                  />
                </div>
                <div className={styles.bottom}>
                  <span>
                    应用平均算法数 <i>{this.props.algorithm.avgAlgorithm}</i>
                  </span>
                </div>
              </Card>
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}

AmountCard.propTypes = {};

AmountCard.defaultProps = {
  accessApp: {
    accessAppCount: 18,
    newAccessAppName: "微信",
    newAccessAppTime: "2018-08-03 15:34:36"
  },
  push: {
    pushCount: 2, // 全部推送数量
    dayPushCount: 1 // 当日推送数量
  },
  read: {
    readCount: 100, // 查看数量
    readRate: "66%" // 查看率
  },
  algorithm: {
    algorithmCount: 66, // 推送算法数量
    avgAlgorithm: 5.4 // 应用平均算法数量
  }
};

export default AmountCard;
